<template>
<div v-show="disPlayFlag">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>设置联系信息</span>
        </div>
        <el-form :rules="rules" ref="targetForm" :model="temp" label-width="130px" label-position='right' size="small">
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="telephone" size='small'>
                        <el-input v-model="temp.telephone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="mobile" size='small'>
                        <el-input v-model="temp.mobile"></el-input>
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="电子邮件" prop="email" size='small'>
                        <el-input v-model="temp.email"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="传真号码" prop="faxno" size='small'>
                        <el-input v-model="temp.faxno"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="联系地址" prop="address" size='small'>
                        <el-input v-model="temp.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮政编码" prop="zipCode" size='small'>
                        <el-input v-model="temp.zipCode"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="办公室" prop="office" size='small'>
                        <el-input v-model="temp.office"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭电话" prop="homeno" size='small'>
                        <el-input v-model="temp.homeno"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <el-card class="box-card">
        <el-button  size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
    </el-card>
</div>
</template>

<script>
import {
  compositeSelect,
  updateItem
} from '@/api/systemManage/tabPaneContactInfo'
export default {
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    targetUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        mobile: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        telephone: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        email: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        homeno: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        faxno: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        address: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        zipCode: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        office: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ]

      },
      temp: {
        telephone: '',
        mobile: '',
        email: '',
        faxno: '',
        address: '',
        zipCode: '',
        office: '',
        homeno: ''
      }
    }
  },
  filters: {

  },
  mounted() {
    if (this.disPlayFlag) {
      this.editForm()
    }
  },
  created() {

  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.editForm()
        } else {
          this.resetAll()
        }
      },
      immediate: true
    }
  },
  methods: {
    editForm() {
      const searchCon = {
        condition: {
          id: {
            property: 'id',
            value: this.targetUserId,
            type: 'EQ'
          }
        },
        fields: [
          'telephone',
          'mobile',
          'email',
          'faxno',
          'address',
          'zipCode',
          'office',
          'homeno'
        ]
      }
      compositeSelect(searchCon).then(response => {
        if (response.data.data.count > 0) {
          const resData = response.data.data.records[0]
          this.temp = Object.assign({}, resData) // copy obj   this.subSystemsOptions.push(input);
        }
      })
    },
    resetAll() {
      this.temp = {
        telephone: '',
        mobile: '',
        email: '',
        faxno: '',
        address: '',
        zipCode: '',
        office: '',
        homeno: ''
      }
      if (this.$refs.targetForm) {
        this.$refs.targetForm.clearValidate()
      }
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          updateItem(this.targetUserId, this.temp).then(() => {
            this.resetAll()
            this.editForm()
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
